<template>
  <div class="error">
        <div class="bg-error-500">
    <section class="pd-5vw">
      <div class="text-red">
        <div class="text-size-20-vh">
          <strong>
            500
          </strong>
        </div>
        <h1 class="text-size-5-vh dpd-20 qlariti-line-height-0">
          Internal Server Error !
        </h1>
      </div>
      <div class="">
        <a @click="backToHome()" class="back-btn-500">&larr; Back To Home</a>
      </div>
    </section>
    <div class="error-img">
      <img
        :src="src"
        alt=""
        @click="backToHome()"
      />
    </div>

    <section class="bottom-copy">
      <div class="dpd-20">
        <a @click="backToHome()">
          <svg
            height="50px"
            width="60px"
            fill="#000000"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xml:space="preserve"
            version="1.1"
            style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;"
            viewBox="0 0 333 333"
            x="0px"
            y="0px"
            fill-rule="evenodd"
            clip-rule="evenodd"
          >
            <defs style="fill: #000000;">
              <!-- <style type="text/css">
                .fil0 {
                  fill: #000000;
                }
              </style> -->
            </defs>
            <g>
              <g>
                <path
                  class="fil0"
                  d="M113 156c3,-25 14,-47 31,-63 -8,-3 -17,-5 -27,-5 -29,0 -54,16 -68,39l-22 -11c18,-31 52,-53 90,-53 18,0 35,5 50,13 14,-8 31,-13 49,-13 39,0 72,22 90,53l-22 11c-14,-23 -39,-39 -68,-39 -9,0 -18,2 -27,5 17,16 28,38 31,63 -36,0 -71,0 -107,0zm75 -24c-5,-11 -12,-20 -21,-27 -9,7 -16,16 -22,27l43 0z"
                ></path>
                <path
                  class="fil0"
                  d="M220 180c-3,24 -15,45 -31,61 9,3 18,4 27,4 29,0 54,-15 68,-39l22 11c-18,32 -51,53 -90,53 -18,0 -35,-5 -49,-13 -15,8 -32,13 -50,13 -38,0 -72,-21 -90,-53l22 -11c14,24 39,39 68,39 10,0 19,-1 27,-4 -16,-16 -27,-37 -30,-61 35,0 70,0 106,0zm-73 25c5,9 12,17 20,23 8,-6 14,-14 19,-23l-39 0z"
                ></path>
              </g>
            </g>
          </svg>
        </a>
      </div>
      <div>&copy; 2022 Company. Mis WU</div>
    </section>
  </div>
  </div>
</template>

<script>
import { img500 } from '@/utils/500Img.js'
export default {
  data(){
    return{
      src:''
    }
  },
  mounted(){
    this.src = img500();
  },
  methods:{
    backToHome(){
      // this.$message.success("水水水水");
      this.$router.push('/');
    }
  }
};
</script>

<style scoped>
      @import url('../../assets/css/500.css');
</style>
